<template>
  <div id="departmentDoctor" class="doctor-wrap">
    <div class="main-bg" :style="sceneid==='sstbg'?'height:640px;':''"></div>
    <el-tabs>
      <el-tab-pane label="普通门诊">
        <el-row :gutter="40">
          <el-col 
          v-for="( item, index ) in general.slice((gcurrentPage-1)*gpagesize,gcurrentPage*gpagesize)"
          :key="index"
          :span="6"
          >
            <el-card  @click.native="selectDoct(item)" >
              <el-container>
              <el-aside width="54px"><el-avatar width="100%" :size="54" :src="item.imgBase">医生照片</el-avatar></el-aside>
              <el-main>
                <h1 class="doctor-name"><b>{{ item.doctorName }}</b></h1>
                <h1 class="doctor-name">{{item.title}}</h1>
                 <!--<h1 class="doctor-name">挂号费：{{item.regFee}}元</h1>
                  <h1 class="doctor-name">诊查费：{{item.otherFee}}元</h1>-->
                 <h1 class="doctor-name">总费用：{{item.fee}}元</h1> 
                <!-- <p>{{ item.description }}</p> -->
              </el-main>
              </el-container>
            </el-card>
          </el-col>
        </el-row>
        <div class="pagination-wrap">
          <el-pagination
            @size-change="ghandleSizeChange"
            @current-change="ghandleCurrentChange"
            :current-page="gcurrentPage"
            :page-size="gpagesize"
            layout="prev, pager, next"
            :total="general.length"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="专家门诊">
        <el-row :gutter="40">
          <el-col 
          v-for="( item, index ) in specialists.slice((scurrentPage-1)*spagesize, scurrentPage*spagesize)"
          :key="index"
          :span="6"
          >
            <el-card  @click.native="selectDoct(item)" >
              <el-container>
              <el-aside width="54px"><el-avatar :size="54" :src="item.imgBase">医生照片</el-avatar></el-aside>
              <el-main>
                <h1 class="doctor-name"><b>{{ item.doctorName }}</b></h1>
                <h1 class="doctor-name">{{item.title}}</h1>
                  <!-- <h1 class="doctor-name">挂号费：{{item.regFee}}元</h1> -->
                 <!-- <h1 class="doctor-name">诊查费：{{item.otherFee}}元</h1> -->
                 <h1 class="doctor-name">总费用：{{item.fee}}元</h1>
                <!-- <p>{{ item.description }}</p> -->
              </el-main>
              </el-container>
            </el-card>
          </el-col>
        </el-row>
        <div class="pagination-wrap">
          <el-pagination
            @size-change="shandleSizeChange"
            @current-change="shandleCurrentChange"
            :current-page="scurrentPage"
            :page-size="spagesize"
            layout="prev, pager, next"
            :total="specialists.length"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { queryDoctor } from '@api/data'
export default {
  name: "Mzys",
  data() {
    return {
      sceneid:this.$store.state.terminfo.seceninfo.sceneid,
      ysinfos: [],
      specialists: [], // 专家号
      general: [],     // 普通医生号
      scurrentPage: 1,  // 专家初始页
      spagesize: 4,      // 专家每页的数据
      gcurrentPage: 1,  // 普通医生初始页
      gpagesize: 4      // 普通医生每页的数据
    };
  },
  props: {},
  mounted() {
    this.query();
  },
  methods: {
    selectDoct(data) {
      this.$store.dispatch('appointment/updateDoctor', data) // 维护store
      this.$emit('selectDoct',data)
    },
    query() {
         var cardType=this.$store.state.user.userinfo.cardType;
         console.log("cardType="+cardType);
         var isMedInsur="0";
          if(parseInt(cardType)==2){
            isMedInsur="1";
          }
          console.log("isMedInsur="+isMedInsur);
      let data = {}
      data.url = "/api/GetDoctorInfo"
      data.payload = {
        "regDate": this.$store.state.appointment.date.day,//上一步的选择日期
        "type": this.$store.state.appointment.date.type,//选择日期为当天传1、挂号 ，其余日期传2、预约挂号
        "deptId": this.$store.state.appointment.department.deptId,
        "isMedInsur":isMedInsur,
        "patientId":this.$store.state.user.userinfo.patientId,
         "termId": this.$store.state.terminfo.terminfo.termId,
        "hisOperNo": this.$store.state.terminfo.terminfo.hisOperNo,
      }
      queryDoctor(data).then(res => {
        if(res.data.length<1){
          this.$alert("当前科室无排班医生,请重新选择科室", "提示：", {
            confirmButtonText: "确定",
            callback: action => {
              // if (action == "confirm" || action == "cancel") {
              //   this.$store.commit("alteruserinfo", "");
              //   this.$router.push({ name: "home" });
              // }
              this.$parent.previousStep()
            }
          });

          return;
        }
        console.log("selectDoc",this.$parent)
        this.ysinfos = res.data
        for( let item of res.data) {
        if(item.regTypeId === "1"){
            this.general.push(item)
          }
           else{
            this.specialists.push(item)
          }
        }
      })
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    ghandleSizeChange: function(size) {
      this.gpagesize = size;
    },
    ghandleCurrentChange: function(currentPage) {
      this.gcurrentPage = currentPage;
    },
    shandleSizeChange: function(size) {
      this.spagesize = size;
    },
    shandleCurrentChange: function(currentPage) {
      this.scurrentPage = currentPage;
    }
  }
};
</script>

<style scoped>
  .main-bg{
    position: absolute;
    width: 100%;
    left: 0;
    top: 46px;
    bottom: 0;
    background: #fff;
  }
  .el-tabs{
    position: absolute;
    left: 0;
    width: 100%;
    top: 46px;
    bottom: 0;
  }
  .el-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  .doctor-name{
    /* color: #2888ef; */
    color: #999;
    font-weight: bold;
    font-size: 14px;
  }
  .doctor-name b{
    color: #333;
  }
  .el-card{
    margin: 0 0 20px 0;
  }
  .el-pagination {
    position: relative;
    text-align: center;
  }
  .pagination-wrap{
    position: fixed;
    left: 0;
    width: 100%;
    bottom: 132px;
  }
</style>
<style>
  #departmentDoctor .el-tabs__nav{
    width: 100%;
  }
  #departmentDoctor .el-tabs__item{
    width: 50%;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    line-height: 60px;
    height: 60px;
  }
  .el-card__body{
    padding: 16px;
  }
  .el-main{
    padding: 8px 0 0 16px;
  }
</style>
